<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="50%"
    @open="openDialog"
  >
    <el-checkbox-group v-model="roleIdList">
      <el-checkbox
        v-for="item in roleList"
        :key="item.id"
        class="flex align-start flex1"
        :label="item.id"
      >
        <div>{{ item.name }}</div>
        <div class="description">{{ item.description }}</div>
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="submitForm"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance, toRef } from 'vue';
import { ElMessage } from 'element-plus';
import { internetApi } from '@/api/api.js';
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;

const loading = ref(false);

const checkList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref(''); //弹窗标题
const roleList = ref([]);
const staffId = ref(null);
const roleIdList = ref([]);
const props = defineProps({
  getMenuList: Function,
});
// 打开弹窗，父组件调用的方法，且弹窗方法
const openDialog = (row, type) => {
  if (type == 'role') {
    dialogTitle.value = '设置角色';
    getRoleList();
    staffId.value = row.staffId;
    roleIdList.value = row.roleIds ? row.roleIds.split(',') : [];
  }
  dialogVisible.value = true;
  console.log('row', row);
  // console.log('type',type)
};
//获取角色列表
const getRoleList = () => {
  if (roleList.value.length === 0) {
    $request(internetApi.getRoleList, { currentPage: 1, pageSize: 99999 }).then(
      (res) => {
        roleList.value = res.data.list;
      }
    );
  }
};
// 确认添加菜单
const submitForm = async () => {
  loading.value = true;
  $request(internetApi.addStaffRole, {
    staffId: staffId.value,
    roleIdList: roleIdList.value,
  })
    .then(() => {
      loading.value = false;
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      props.getMenuList();
      dialogVisible.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};
// 导出，使父组件可调用子组件的方法或者值
defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
.from-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-checkbox-group {
  margin-top: -10px;
  .el-checkbox {
    margin-top: 20px;
    margin-right: 0px;
    min-width: 40%;
    :deep(.el-checkbox__input) {
      display: flex;
      align-items: center;
      height: 19px;
    }
    .description {
      color: #999;
      font-size: 12px;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-top: 5px;
    }
    &.is-checked {
      :deep(.el-checkbox__label) {
        .description {
          color: #409eff;
        }
      }
    }
  }
}
</style>
